import QtQuick 2.3

Rectangle
{
    id: view

    width: 460
    height: 640

    signal menuEntryClicked(string _id)

    property bool menuShow: false

    /* this functions toggles the menu and starts the animation */
    function onMenu()
    {
        xTranslate.x = view.menuShow? 0 : view.width * 0.8
        view.menuShow = !view.menuShow;
    }

    /* the menu */
    Rectangle
    {
        id: menuView
        anchors.fill: parent
        color: theme.menuBackground
        opacity: view.menuShow? 1 : 0
        Behavior on opacity { NumberAnimation { duration: 300 } }

        ListView
        {
            id: menuViewList
            anchors.fill: parent
            model: MenuModel{}
            delegate: MenuMultiDelegate
            {
                onMenuEntryClicked: view.menuEntryClicked(_id)
            }
        }
    }

    /* the view */
    Rectangle
    {
        id: mainView
        anchors.fill: parent
        color: theme.mainBackground

        /* this is what moves the normal view aside */
        transform: Translate
        {
            id: xTranslate
            x: 0
            Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutQuad } }
        }

        /* menu shadow */

        /* menu bar and button */
        Rectangle
        {
            id: menuBar
            anchors.top: parent.top
            width: parent.width;
            height: 70;
            color: theme.menuBarBackground
            Rectangle
            {
                id: menuButton
                anchors {left: parent.left; verticalCenter: parent.verticalCenter; margins: 20 }
                color: "transparent"
                width: 40
                height: 40
                smooth: true
                scale: mouseArea.pressed ? 1.2 : 1
                Image
                {
                    anchors.centerIn: parent
                    source: "qrc:///icons/slide.png"
                }
                MouseArea
                {
                    id: mouseArea
                    anchors.fill: parent
                    onClicked: view.onMenu()
                }
            }
            Text
            {
                text: "Whandgo"
                font.family: theme.ubuntuFont.name
                font.pointSize: theme.mediumFont
                color: theme.titleText
                anchors.centerIn: parent
            }
        }

        /* GridView */
        GridView
        {
            anchors { top: menuBar.bottom; bottom: parent.bottom; left: parent.left; right: parent.right; margins: 30 }
            clip: true; model : 20;
            delegate: Rectangle { width: 80; height: 80; color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1) }
        }

        /* put this last to "steal" touch on the normal window when menu is shown */
        MouseArea
        {
            anchors.fill: parent
            enabled: view.menuShow
            onClicked: view.onMenu();
        }
    }
}
